<template>
<view>
	<view class="tipTile">
		<view :class="tip?'open':'close'">说明：根据八字算命的测算规则，无论公历和农历，最终都要转换成天干地支的纪时状态，所以公历和农历一样都可以测算，你出生的公历和农历之间只是相互的数字运算而已。卜易居八字测算系统暂时只支持公历生辰输入，以后会推出农历版本。</view>
		<button v-show="tip" @click="openTip" class="tipIcon">🔻</button>
		<button v-show="!tip" @click="openTip" class="tipIcon">🔺</button>
	</view>
	<view>
		<picker mode="date" header-text="选择时间" value="date" @change="bindDateChange" start="1984-01-01" end="2043-12-31">
		  <view class="font30">
		    <text class="color3">选择宝宝出生时间：</text>
		    <text class="color6">{{date}}</text>
		    <text class="timeIcon">▼</text>
		  </view>
		</picker>
	</view>
	<view class="inputbox">
	    <radio-group @change="radioChange">
	    <view class="radiobox">
			选择宝宝的性别：
	        男<radio value="男" color="#ff0000" checked/>
			女<radio value="女" color="#ff0000"/>
	    </view>
	    </radio-group>          
	</view>
	
		<!-- 计算后显示的内容 -->
		<view class="content" v-show="nameCompute">
			<view class="">
				<span>分析结果如下</span>
				<view>
					<span class="bri">出生日期是：{{dateTime.year}}年{{dateTime.month}}月{{dateTime.day}}日</span><br>
					<span class="bri">宝宝的生肖：{{zodiac}}</span>&nbsp;<br>
					<span class="bri">宝宝的性别：{{sex}}</span><br>
					<view class="table">
						<view class="tr">
							<view class="th">类别</view>
							<view class="th">真太阳时公历</view>
							<view class="th">八字</view>
							<view class="th">五行</view>
						</view>
						<view class="tr">
							<view class="td">年</view>
							<view class="td">{{dateTime.year}}年</view>
							<view class="td">{{bazi.year}}</view>
							<view class="zi td">{{wuxing.year}}</view>
						</view>
						<view class="tr">
							<view class="td">月</view>
							<view class="td">{{dateTime.month}}月</view>
							<view class="td">{{bazi.month}}</view>
							<view class="zi td">{{wuxing.month}}</view>
						</view>
						<view class="tr">
							<view class="td">日</view>
							<view class="td">{{dateTime.day}}日</view>
							<view class="td">{{bazi.day}}</view>
							<view class="zi td">{{wuxing.day}}</view>
						</view>
						<view class="tr">
							<view class="td">时</view>
							<view class="td">{{dateTime.time}}点</view>
							<view class="td">{{bazi.time}}</view>
							<view class="zi td">{{wuxing.time}}</view>
						</view>
					</view>
					
				</view>
				<view class="font40">
					<span class="font30">出生月份含义:</span>
					<view class="font38">{{monthMin}}</view>
					<span class="font30">出生日子含义:</span>
					<view class="font38">{{dayMin}}</view>
				</view>
				
			</view>
			
		</view>
	<view class="compute">
		<button @click="computedName" v-show="!nameCompute">开始计算</button>
		<button @click="computedName" v-show="nameCompute">收起结果</button>
	</view>
	<view class="listTypes">
		<view class="listType" style="margin-top: 20px;" id="first">
			<navigator url="./name_three/name_three">
				<view class="urlText">古法取名</view>
			</navigator>
		</view>
		<view class="listType" id="second">
			<navigator url="./name_one/name_one">
				<view class="urlText">起名要素</view>
			</navigator>
		</view>
		
		<view class="listType" id="last">
			<navigator url="./name_two/name_two">
				<view class="urlText">八字命理</view>
			</navigator>
		</view>
	</view>	
	<view class="minTip">
		<span>本站所有内容，来源于古书或互联网，非科学的研究结果，仅供网友娱乐参考。</span>
	</view>
	</view>
	
</template>

<script>
	export default {
		data() {
			return {
				date:'2021-01-01',
				time:'00',
				nameCompute:0,
				tip:true,
				// 阳历
				dateTime:{year:'2021',month:'01',day:'01',time:'00'},
				// 农历
				zodiac:'鼠',
				sex:'男',
				bazi:{year:'庚子',month:'戊子',day:'己酉',time:'甲子'},
				// 五行
				wuxing:{year:'金水',month:'土木',day:'土金',time:'木水'},
				// 出生月日时辰的含义
				monthMin:'此月生人，前年二月受胎，大雪节后出生。伶俐却性急，近贵却多计较，易招障害。务得人和，作事努力，名位自得。初限难为，中年灾涉色情，晚运大好，享子孙福。 诗曰：自觉早年成立家，生平衣禄有荣华，亲戚兄弟全无靠，交接好友胜其他。',
				dayMin:'此日生人，为人温柔，刻苦耐劳，善好勤俭，多积蓄物，少年不宜，中年大吉，将见名扬，福禄双至，晚年馀庆，家门隆兴，福禄之命。',
				//月份含义计算数据
				mothList:[
					{id:1,min:"此月生人，前年二月受胎，大雪节后出生。伶俐却性急，近贵却多计较，易招障害。务得人和，作事努力，名位自得。初限难为，中年灾涉色情，晚运大好，享子孙福。 诗曰：自觉早年成立家，生平衣禄有荣华，亲戚兄弟全无靠，交接好友胜其他。"},
					{id:2,min:"此月生人，前年三月受胎，小寒节后出生。为人心直口快，兄弟难靠。出外风光好。衣禄有足余。广交朋友，爱管闲事；抱负甚大，志气恢宏，心贪易遭失败。初限有福，中年辛劳，晚景大吉。 诗曰：初限勤劳受苦辛，自然未后下求人。好运来时禄至，夫妇团圆寿百春。"},
					{id:3,min:"此月生人，前年四月受胎，立春节后出生。为人忠厚，富有侠义心，仁德待人，同情心深，牺牲自己，成人之美。但带有神经质。利官近贵，可富贵增荣。然大事小成，凡事仔细，若不失机，能招四方之财。幼年平常，中年运开，晚年荣富。无刑克之命。 诗曰：相貌端正前缘，早年衣禄自安然。贵人接引鸿运路，夫妇团圆过百年。"},
					{id:4,min:"此月生人，前年五月受胎，惊蛰节后出生。性情温良，为人诚实。出言无毒，善作阴德，诸事谦尊，成功如登梯，贪急则失败，切记随机行事，方万事安然。初限辛苦，中年发达，四十兴荣后，可终年利路享通，乃虎假半真之命。 诗曰：平生良善自有持，衣禄增荣盛有余。钱财家业中年好，贵人提拔上云梯。"},
					{id:5,min:"此月生人，前年六月受胎，清明节后出生。志气不凡，内心强固，交际巧妙，脑智明晰。宽宏大量，事多忍耐，忍耐不如奋斗，莫要错失良机。应修身谨慎，有重色情前程，为情色害良缘之虞。三十岁前逢盛运，财来财往，有虚元实；四十岁后自安然，凡事顺遂，不可焦急。福禄永在。 诗曰：为人心情自宽怀，平生积得四方财，一旦时来当发福，犹如枯木遇春天。"},
					{id:6,min:"此月生人，前年七月受胎，立夏节后出生。广交朋友，多才巧智。学艺能成功，奈欲望过大，心性难定。宜不懈奋斗，终保发达。义侠心强，肯牺牲自己，败强助弱，后逢贵提拔，声扬名震，卅七岁后发展，为头目之人。 诗曰，一年喜乐一年忧，无须怨恨匆忧愁，最宜持济行方便，夫妇齐眉乐到头。"},
					{id:7,min:"此月生，前年八月受胎，芒种节后出生，为人善良，性情温和伶俐。行而正道，自能成功，恐对事虎头蛇尾，无忍耐性，遇良机不能得。离祖成家。夫妇半途，婚迁为吉，卅一岁或卅五岁后，方能大得利益。 诗曰：自出常遇见横财，上人接引笑颜开。田园产业家豪富，荣华富贵步金阶。"},
					{id:8,min:"此月生人，前年九月受胎，小暑节后出生。为人远达，心巧伶俐，思虑致密，艺术多能。具努力有坚定心者，终为大发达。若贪小利则失大败，重色情必破家庭。白手成家，难得祖业，初限难为，中年平顺未运富贵。 诗曰：一生衣禄人安康，为人显达有文光。三春快东蓄家富，夫妻同居松柏长。"},
					{id:9,min:"此月生人，前年十月受胎，立秋节后出生。心地慈善，作风仔细，为人亲切，外刚内柔，意志坚固，作事始终。少年辛苦，初限破财。对子妇烦恼，小心阴人。中年后开泰，晚年家庭园满，财源大旺。 诗曰：为人一生不须忧，少小定心有根由。家宅由园宜主管，方知福禄不待人。"},
					{id:10,min:"此月生人，前年十一月受胎，白露节后出生，文章显达，记忆机敏，四方多艺创造巧妙。但独立不宜，须合夥成事，正直无私。初限幸福，中年离乱，于不意中失败，晚年福禄济美。 诗曰：为人端正貌堂堂，皆因前世性温良。今生宜多行善事，自然福禄寿绵长"},
					{id:11,min:"此月生人，前年十二女受胎，寒露节后出生。智慧锐敏，招四方之财。恐怕聪明自误，有失仁和，宜养温柔之心，自然贵人扶持。常省过去，奋发向前，趁时乘利，自得权柄。至四十而大发，子孙兴隆，多多顺利，晚景幸福。 诗曰：此人生后大得财，钱财用尽又送来。八字好星家豪富衣禄儿职称心怀。"},
					{id:12,min:"此月生人，前年正月受胎，冬至节后出生。为人声音刚强，心灵艺巧，然男女多相克，夫妇难合睦，心情易变动，常为失败之因。初限不理想，晚景安逸。 诗曰：为人生来庆半余，免得灾殃祸其身，更宜持济行善事，一生衣禄睦三春"},
				],
				dayList:[
					{id:1,min:"此日生人，为人温柔，刻苦耐劳，善好勤俭，多积蓄物，少年不宜，中年大吉，将见名扬，福禄双至，晚年馀庆，家门隆兴，福禄之命。"},
					{id:2,min:"此日生人富有智力，意志坚固，享有决断，至中年虽有横财，不能料事，空放幸运，宜要谨慎，财源循来，福分之命。"},
					{id:3,min:"此日生人，环境良好，为人厚重，沉静不动，男人清秀，女人聪明，贵人得助，青年平常，努力前程，中年运开，事得顺调，晚年发达，厚分之命。"},
					{id:4,min:"此日生人，夫妻敬重，子孙刑克，强争好斗，破害前程，卅五之后方来馀庆，男者离租，他乡发展，女人克夫，必配硬命，平常之命。"},
					{id:5,min:"此日生人，为人聪明，智力平凡，忍耐力强，少年多障害，难关重重来，善理时时机，对兄弟情薄，故六亲无告，自力更生，中年大发，发达之命。"},
					{id:6,min:"此日生人，名利双收，成功运强，为人出众，色情心重，桃唇小身有暗病，苦恼自叹，应防患未然，中年平平，未运福禄，荣华之命。"},
					{id:7,min:"此日生人，内助得力，衣禄和顺，受人提拔，待有金运，喜好投机，艺高胆大，不服他人，中年平平，事无称心，未境发达，晚福之命。"},
					{id:8,min:"此日生人，为人伶俐，作事专业，有头有尾，对人亲切，四处友朋，受人敬爱，好积财宝，出外逢贵，刑克妻子，盛昌之命。"},
					{id:9,min:"此日生人，为人忠实，大有器才，喜好公益，巧理家庭，专业经营，事业发达，多管他事，易生敌对，心性未定，可得内助，晚年发达，大旺之命。"},
					{id:10,min:"此日生人，青年薄运，幼年病多，独立意志，认真作事，中年运到，积蓄金钱，自得良缘，亲朋难靠，早婚刑克，晚婚平静，求得温和，金运之命。"},
					{id:11,min:"此日生人，性情刚果。不眼他人，造成怨城，受人攻击，与人和柔，幸运循来，少年薄运，多劳不乐。愁眉不展，至中年，运气一新，兴隆之命。"},
					{id:12,min:"此日生人，福禄难全，财星拱照，受人引进，事业发达，大有良机，初年平常，中年运到，利路亨通，晚景荣幸，发福之命。"},
					{id:13,min:"此日生人，性格善良，与人和睦，身体健康，家族缘薄，离祖成家，青年辛苦，兄弟难靠，独立生汁，中年运天，财源广进，男主清奇，女主聪明，成立之命"},
					{id:14,min:"此日生人，夫妻和睦，不能偕老，子息克乏，须修身布德，初年多乖，三十有庆，受人提拔，四十盛运，左作右中，环境良好，荣华之命。"},
					{id:15,min:"此日生人，为人忠实，大有器才，喜好公益，巧理家庭，专业经营，事业发达，多管他事，易生敌对，心性未定，可得内助，晚年发达，大旺之命。"},
					{id:16,min:"此日生人，末运大旺，与人亲睦，贵人提拔，发达成功，父兄无靠。白手成家。"},
					{id:17,min:"此日生人，性格善良，与人和睦，身体健康，家族缘薄，离祖成家，青年辛苦，兄弟难靠，独立生汁，中年运天，财源广进，男主清奇，女主聪明，成立之命"},
					{id:18,min:"此日生人，性格多变易动，事业浮沉末定，半生波澜风霜，卅五后来佳运，事事如意，女命福禄，守身平和，乃健全长寿之命。"},
					{id:19,min:"此日生人，性格伶俐，一生安中年成功，父母无缘，离祖成家，出外逢贵，乃富贵荣华之命。"},
					{id:20,min:"此日生人，身体健全，性格清朗，受人敬受，须事事勉励，勤俭行善，德被乡党，中年平顺，晚景千钟，福分无量，名利长存，慈悲富贵之命。"},
					{id:21,min:"此日生人，为人伶俐，忠诚待人，家族缘薄，离祖成家，缘和四海，少年辛苦，中年开发，晚年大兴，事业通达，艺术成功，安乐之命。"},
					{id:22,min:"此日生人富有智力，意志坚固，享有决断，至中年虽有横财，不能料事，空放幸运，宜要谨慎，财源循来，福分之命。"},
					{id:23,min:"此日生人，为人温柔，刻苦耐劳，善好勤俭，多积蓄物，少年不宜，中年大吉，将见名扬，福禄双至，晚年馀庆，家门隆兴，福禄之命。"},
					{id:24,min:"此日生人，金运可达，福禄有馀，遵守道德，受人敬爱，贵人提拔，命运通达，大有成功，获得幸福，福禄双收，女命富贵，金运之命。"},
					{id:25,min:"此日生人，环境良好，为人厚重，沉静不动，男人清秀，女人聪明，贵人得助，青年平常，努力前程，中年运开，事得顺调，晚年发达，厚分之命。"},
					{id:26,min:"此日生人，夫妻敬重，子孙刑克，强争好斗，破害前程，卅五之后方来馀庆，男者离租，他乡发展，女人克夫，必配硬命，平常之命。"},
					{id:27,min:"此日生人，为人聪明，艺术超群，琴棋达人，书诗出分。青年勤功，中年艺精，成功发达，祖业不宜，身闲心劳，忧闷之命。"},
					{id:28,min:"此日生人，为人聪明，智力平凡，忍耐力强，少年多障害，难关重重来，善理时时机，对兄弟情薄，故六亲无告，自力更生，中年大发，发达之命。"},
					{id:29,min:"此日生人，智能可畏，自作聪明，不容他人，性格过刚，与人不和，独立自好，父兄无缘，晚景大运，中年平平，普通之命。"},
					{id:30,min:"此日生人，名利双收，成功运强，为人出众，色情心重，桃唇小身有暗病，苦恼自叹，应防患未然，中年平平，未运福禄，荣华之命"},
					{id:31,min:"此日生人，刑克上少成多劳，心身多烦，波澜重见，男人离祖，租业难富，亲朋无靠，山外得财，有贵人助，晚景大幸，昌盛之命。"},
				],
				//八字计算数据
				dateList:[
					// month:'甲子',day:'甲午'
					{id:1,year:'癸亥',},
					{id:2,year:'甲子',},
					{id:3,year:'乙丑',},
					{id:4,year:'丙寅',},
					{id:5,year:'丁卯',},
					{id:6,year:'戊辰',},
					{id:7,year:'己巳',},
					{id:8,year:'庚午',},
					{id:9,year:'辛未',},
					{id:10,year:'壬申'},
					{id:11,year:'癸酉'},
					{id:12,year:'甲戌'},
					{id:13,year:'乙亥'},
					{id:16,year:'戊寅'},
					{id:14,year:'丙子'},
					{id:15,year:'丁丑'},
					{id:17,year:'己卯'},
					{id:18,year:'庚辰'},
					{id:19,year:'辛巳'},
					{id:20,year:'壬午'},
					{id:21,year:'癸未'},
					{id:22,year:'甲申'},
					{id:23,year:'乙酉'},
					{id:24,year:'丙戌'},
					{id:25,year:'丁亥'},
					{id:26,year:'戊子'},
					{id:27,year:'己丑'},
					{id:28,year:'庚寅'},
					{id:29,year:'辛卯'},
					{id:30,year:'壬辰'},
					{id:31,year:'癸巳'},
					{id:32,year:'甲午'},
					{id:33,year:'乙未'},
					{id:34,year:'丙申'},
					{id:35,year:'丁酉'},
					{id:36,year:'戊戌'},
					{id:37,year:'己亥'},
					{id:38,year:'庚子'},
					{id:39,year:'辛丑'},
					{id:40,year:'壬寅'},
					{id:41,year:'癸卯'},
					{id:42,year:'甲辰'},
					{id:43,year:'乙巳'},
					{id:44,year:'丙午'},
					{id:45,year:'丁未'},
					{id:46,year:'戊申'},
					{id:47,year:'己酉'},
					{id:48,year:'庚戌'},
					{id:49,year:'辛亥'},
					{id:50,year:'壬子'},
					{id:51,year:'癸丑'},
					{id:52,year:'甲寅'},
					{id:53,year:'乙卯'},
					{id:54,year:'丙辰'},
					{id:55,year:'丁巳'},
					{id:56,year:'戊午'},
					{id:57,year:'己未'},
					{id:58,year:'庚申'},
					{id:59,year:'辛酉'},
					{id:60,year:'壬戌'},
				]
				

			}
		},
		methods: {
			bindDateChange(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value),
				this.date = e.detail.value
				var list=this.date.toString().split("-");
				this.dateTime.year=list[0]
				this.dateTime.month=list[1]
				this.dateTime.day=list[2]
				// console.log(list,this.dateTime.year)
				
			},
			radioChange(e) {
			    console.log('radio发生change事件，携带value值为：', e.detail.value),
				this.sex=e.detail.value
			},
			computedName(){
				this.nameCompute=!this.nameCompute
				console.log(this.sex,this.date)
				// 计算八字
				for(let i=0;i<60;i++){
					// 年
					var num=Number(this.dateTime.year)
					num=(num-1984)%60+1
					// console.log(num)
					if(this.dateList[i].id==num){
						console.log(num)
						this.bazi.year=this.dateList[i].year
						console.log(this.bazi.year,this.dateList[i].year)
					}
					// 月份
					var num1=Number(this.dateTime.month)
					// console.log(num1,num)
					num1=((Number(this.dateTime.year)-1984)*12+num1)%60
					if(this.dateList[i].id==num1){
						// console.log(num1,"num")
						this.bazi.month=this.dateList[i].year
						console.log(this.bazi.month)
					}
					// 日
					var num2=Number(this.dateTime.day)
					num2=(Number(this.dateTime.year-1984)*365+Number(this.dateTime.month)*12+num2)%60
					// console.log(num2)
					if(this.dateList[i].id==num2){
						// console.log(num2)
						this.bazi.day=this.dateList[i].year
						console.log(this.bazi.day)
					}
				};
				// 计算月份含义
				for(let i=0;i<12;i++){
					var num=Number(this.dateTime.month);
					if(num==i){
						// console.log(num,typeof(num))
						this.monthMin=this.mothList[i].min
						console.log(this.monthMin)
					}
				}
			},
			openTip(){
				this.tip=!this.tip
			}
			
		}
	}
</script>

<style>
		
	.tipTile{
		color: #666;
		background-color: antiquewhite;
	}
	.open{
		line-height: 30px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.close{
		line-height: 30px;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 50;
		overflow: hidden;
	}
	.tipTile{
		margin-bottom: 10px;
	}
	.tipIcon{
		/* position: relative;
		top:-20px; */
		background-color: rgba(229, 229, 229, 0.2);
		border-radius: 50%;
		width: 48px;
		height: 48px;
		/* font-size: 30px; */
		/* text-align: center; */
		
	}
	.minTip{
		text-align: center;
		background-color: rgba(227, 227, 227, 0.5);
		color: rgba(0,0,0,0.5);
	}
	.font30{
	  font-size: 38rpx;
	  padding: 5px 10px;
	}
	.font38{
		margin: 10px 5px;
	}
	.font40{
		margin: 10px 5px;
	}
	::v-deep header-text{
		width: 200px;
		color: #ff557f;
	}
	.color3{
	  color: #333;
	}

	.color6{
	  color: #333;
	  padding: 5px 20px;
	}
	.radiobox{
		font-size: 38rpx;
		color: #333;
		padding: 10px 10px;
		/* margin: 10px auto; */
	}
	.timeIcon{
	  color:#666;
	  font-size:40rpx;
	  margin-left: 5rpx;
	}
	.bri{
		padding:5px 10px
	}
	.table {
		width: 80%;
		border-radius: 8rpx;
		display: table;
		border: 1px solid antiquewhite;
		border-collapse: collapse;
		margin: 5px 20px;
	}
 
	.th {
		text-align: center;
		color: #ff557f;
		padding: 20rpx 0;
		font-weight: bolder;
		display: table-cell;
		border: 1px solid antiquewhite
	}
 
	.td {
		text-align: center;
		background: rgba(234, 156, 0, 0.1);
		padding: 20rpx 0;
		display: table-cell;
		border: 1px solid antiquewhite
	}
 
	.tr {
		display: table-row;
	}
	.listTypes{
		display: flex;
		flex-direction: row;
		flex-wrap:wrap;
	}
	.listType{
		width:90%;
		height: 100px;
		margin:5px 10px 5px 15px;
	}
	#first{
		background-image: url("https://s1.ax1x.com/2022/05/27/XerlIH.png");
		background-size: 100%;
	}
	#second{
		background-image: url("https://s1.ax1x.com/2022/05/27/Xer3id.png");
		background-size: 100%;
	}
	#last{
		background-image: url("https://s1.ax1x.com/2022/05/27/XerQde.png");
		background-size: 100%;
	}
	.urlText{
		width: 40%;
		background-color: rgba(24, 24, 24, 0.5);
		padding:5px;
		color: antiquewhite;
		text-align: center;
		z-index: 3;
	}
	.compute button{
		width: 80%;
		text-align: center;
		background-color: antiquewhite;
		color:#2a2a2a;
		
	}
</style>
